<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{$t('level.set')}}</span>
        <el-button style="float: right;" type="primary" :loading="isLoadSub" @click="submit" v-if="nodePower.includes('edit')">{{$t('common.save')}}</el-button>
      </div>
      <el-row :gutter="20" v-loading="isLoading">
        <el-col :span="device==='desktop' ? 8 : 24" v-for="(item, li) in list" :key="li">
          <el-card class="mb20">
            <div slot="header">
              <div class="tag">{{ li+1 }}</div>
            </div>
            <el-form label-position="top">
              <template v-for="(val, key, index) in item">
                <el-form-item :key="index" :label="$t(column[key])" v-if="key!=='member_id'">
                  <el-input :placeholder="$t('common.enter')" v-model="list[li][key]" v-if="['member_name', 'en_member_name'].includes(key)"></el-input>
                  <div class="df" v-else-if="['member_start', 'member_end'].includes(key)"><el-input-number class="f1" :min="0" v-model="list[li][key]"></el-input-number></div>
                  <div class="df" v-else-if="key==='member_status'"><el-select class="f1" v-model="list[li].member_status"><el-option v-for="item in statusOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option></el-select></div>
                </el-form-item>
              </template>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getLevel, editLevel } from '@/api'
export default {
  name: 'MemberList',
  data() {
    return {
      isLoading: false,
      list: [],
      column: {
        member_name: 'level.zh_name',
        en_member_name: 'level.en_name',
        member_start: 'level.start',
        member_end: 'level.end',
        member_status: 'common.status'
      },
      isLoadSub: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 獲取等級列表
    async getList() {
      this.list = new Array(3).fill('seat').map(()=>this.$lodash.cloneDeep({member_id: '', member_name: '', en_member_name:'', member_start: 0, member_end: 0, member_status: 1}))
      try {
        this.isLoading = true
        const {results} = await getLevel()
        let newList = results.splice(0,3)
        newList.forEach(({created_at, updated_at, ...data}, index) => {
          this.$set(this.list, index, data)
        });
      } catch (error) {
        
      } finally {
        this.isLoading = false
      }
    },
    // 提交
    async submit() {
      try {
        this.isLoadSub = true
        await editLevel(this.list)
        this.$message({message: this.$t('common.success'),type: 'success'})
        this.show = false
        this.getList()
      } catch (error) {
        console.log(error);
      } finally {
        this.isLoadSub = false
      }
    }
  }
}
</script>

<style>
.tag {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #42B983;
  color: #ffffff;
  border-radius: 30px;
}
</style>